<template>
  <div class="phone">
    <div class="phone-body">
      <div class="body-header">
        <h2 class="title"><strong>超值商品</strong></h2>
        <div class="all">
          <router-link to="/GoodsList">
            <p>查看全部</p>
            <i class="el-icon-circle-plus-outline"></i>
          </router-link>
        </div>
      </div>
      <div class="body-main">
        <div class="main-left">
            <router-link :to="'/GoodsList/'+leftInfo.id" target="_blank">
              <img :src="leftInfo.imgUrl" alt="">
            </router-link>
        </div>
        <div class="main-right">
          <div class="item" v-for="(item,index) in rightList" :key="index">
            <div class="item-body">
              <p class="flag" :class="{'flagActive1': item.flag == '新品','flagActive2': (item.flag != '新品' && item.flag != '')}" v-cloak>{{item.flag}}</p>
              <router-link :to="'/GoodsList/'+item.id" target="_blank">
                <img :src="item.imgUrl" alt="">
              </router-link>
              <p class="title" v-cloak>{{item.title}}</p>
              <p class="desc" v-cloak>{{item.desc}}</p>
              <div class="priceDiv">
                <p class="price">{{item.price}}</p>
                <del>
                  <p class="oldPrice" :class="{'oldPriceActive':(item.oldProce !='')}">{{item.oldProce}}</p>
                </del>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      leftInfo: {
        imgUrl: '//i1.mifile.cn/a4/xmad_1563761739716_jzeNH.jpg',
        id: '0'
      },
      rightList: [
        { imgUrl: '//i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg', id: '1', title: '小米9 6GB+128GB', desc: '骁龙855，索尼4800万超广角微距三摄', price: '2799元', oldProce: '2999元', flag: '新品' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1540429613.4617799!220x220.jpg', id: '2', title: '小米MIX 3 6GB+128GB', desc: '磁动力滑盖全面屏 / 四曲面陶瓷机身', price: '3299元', oldProce: '', flag: '' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg', id: '3', title: 'Redmi Note 7 Pro', desc: '6GB+128GB大存储，索尼4800万拍照', price: '1599元', oldProce: '', flag: '' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1554694214.08887531!220x220.png', id: '4', title: '小米Play 4GB+64GB', desc: '八核高性能处理器，后置1200万 AI 双摄', price: '749元', oldProce: '999元', flag: '秒杀' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1538019009.57772743!220x220.png', id: '5', title: '小米8 屏幕指纹版 6GB+128GB', desc: '全球首款压感屏幕指纹 骁龙845处理器', price: '1799元', oldProce: '2999元', flag: '秒杀' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1537324004.08544830!220x220.jpg', id: '6', title: '小米8青春版6GB+64GB', desc: '潮流镜面渐变色，2400万自拍旗舰', price: '1499元', oldProce: '1699元', flag: ' 减 200 元 ' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1547020972.223707!220x220.jpg', id: '7', title: 'Redmi Note 7 6GB+64G', desc: '4800万拍照，4000mAh大电量', price: '1399元', oldProce: '', flag: '' },
        { imgUrl: '//i1.mifile.cn/a1/pms_1558857780.47412427!220x220.jpg', id: '8', title: 'Redmi K20 Pro 6GB+128GB', desc: '骁龙855旗舰处理器，索尼4800万超广角三摄', price: '2599元', oldProce: '', flag: '' }
      ]
    }
  },
  methods: {
    example () {

    }
  }
}
</script>

<style lang="stylus" scoped>
.phone
  width 1226px
  margin 0 auto
  .phone-body
    width 100%
    .body-header
      height 58px
      display flex
      justify-content space-between
      align-items center
      .title
        font-size 22px
        font-weight 200
      .all
        a
          color #757575
          font-size 16px
          transition all 0.4s
          display flex
          justify-content space-between
          &:hover
            color #ff6700
          p
            transform translateY(1px)
          i
            width 20px
            height 20px
            font-size 20px
            position relative
            top 2px
            margin-left 7px
    .body-main
      width 100%
      height 614px
      display flex
      justify-content space-between
      .main-left
        transition all 0.2s linear
        z-index 1
        &:hover
          box-shadow 0 15px 30px rgba(0, 0, 0, 0.1)
          transform translate3d(0, -2px, 0)
        a
          img
            width 234px
            height 614px
      .main-right
        width 992px
        height 614px
        display flex
        flex-flow wrap
        justify-content center
        align-content space-between
        .item
          background #fff
          width 234px
          height 300px
          margin-left 14px
          transition all 0.2s linear
          z-index 1
          display flex
          flex-direction column
          &:hover
            box-shadow 0 15px 30px rgba(0, 0, 0, 0.1)
            transform translate3d(0, -2px, 0)
          .item-body
            width 234px
            height 265px
            display flex
            flex-direction column
            align-items center
            justify-content space-between
            .flag
              color #fff
              width 64px
              height 20px
              font-size 12px
              line-height 20px
              z-index 5
              text-align center
            .flagActive1
              background-color #83c44e
            .flagActive2
              background-color #e53935
            a
              transform translateY(-10px)
              img
                width 160px
                height 160px
            .title
              width 200px
              font-size 14px
              font-weight 400
              text-align center
              cursor pointer
              text-overflow ellipsis
              white-space nowrap
              overflow hidden
            .desc
              width 220px
              height 18px
              font-size 12px
              text-align center
              white-space nowrap
              color #b0b0b0
              text-overflow ellipsis
              white-space nowrap
              overflow hidden
            .priceDiv
              font-size 14px
              display flex
              justify-content space-between
              .price
                color #ff6700
              del
                color #b0b0b0
                .oldPriceActive
                  margin-left 4px
</style>
